<template>
	<view>
		<head-children :isBack="'1'">
			<template v-slot:default="">
				<view class="menu">
					<view class="border">
						<view class="item" :class="subjectType=='1'?'active':''" @click="switchSubject('1')">
							科目一
						</view>
						<view class="item" :class="subjectType=='4'?'active':''" @click="switchSubject('4')">
							科目四
						</view>
					</view>

				</view>
			</template>
		</head-children>
		<view class="main">
			<view class="practice">
				<view class="item" @click="order(0)">
					<image class="icon" src="../../static/order.png" mode="widthFix"></image>
					顺序练习
				</view>
				<view class="item" @click="order(1)">
					<image class="icon" src="../../static/random.png" mode="widthFix"></image>
					随机练习
				</view>
			</view>
			<view class="btn" @click="examination">
				<image class="icon" src="../../static/examination.png" mode="widthFix"></image>模拟考试<image class="get"
					src="../../static/get.png" mode="widthFix"></image>
			</view>
			<view class="btn" @click="errorSubject">
				<image class="icon" src="../../static/error.png" mode="widthFix"></image>错题记录<image class="get"
					src="../../static/get.png" mode="widthFix"></image>
			</view>
			<view class="pay" @click="pay">
				VIP购买
			</view>
		</view>

	</view>
</template>

<script>
	import headChildren from '../../components/head.vue';
	export default {
		components: {
			headChildren
		},
		data() {
			return {
				subjectType: ''
			};
		},
		mounted() {
			this.subjectType = uni.getStorageSync("subjectType") || '1'
		},
		methods: {
			//开会员
			pay() {
				uni.navigateTo({
					url: "/pages/mall/vipList"
				})
			},
			//练习
			order(type) {
				if (type == 0) {
					uni.navigateTo({
						url: "/pages/subject/classinfication?subjectType=" + this.subjectType + '&resource=' + type
					})
				} else if (type == 1) {
					uni.navigateTo({
						url: "/pages/subject/random?subjectType=" + this.subjectType + '&resource=' + type
					})
				}

			},
			//切换科目
			switchSubject(type) {
				this.subjectType = type
				uni.setStorageSync("subjectType", this.subjectType)
			},
			//模拟考试
			examination() {
				uni.navigateTo({
					url: "/pages/subject/examination?subjectType=" + this.subjectType
				})
			},
			//错题记录
			errorSubject() {
				uni.navigateTo({
					url: "/pages/subject/errorSubject?isVip=0"
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.main {
		background-color: #fff;
		padding: 10rpx 26rpx;
		min-height: 100%;
	}

	.menu {
		background-color: #3484FF;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10rpx 0rpx;
		box-sizing: border-box;

		.border {
			border: 1px solid #fff;
			width: 280rpx;
			display: flex;
			align-items: center;
			border-radius: 8rpx;


			.item {
				color: #fff;
				font-size: 28rpx;
				text-align: center;
				padding: 8rpx 0;
				flex: 1;
			}

			.active {
				background-color: #fff;
				color: #3484FF;
			}
		}

	}

	.practice {
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 32rpx;

		.item {
			background-color: #F6F6F6;
			color: #6C6C6C;
			font-size: 28rpx;
			padding: 20rpx 26rpx;
			border-radius: 6rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			width: 48%;

			.icon {
				width: 40rpx;
				margin-right: 10rpx;
			}
		}
	}

	.btn {
		background-color: #F6F6F6;
		color: #6C6C6C;
		font-size: 28rpx;
		width: 100%;
		padding: 26rpx;
		margin-top: 32rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;

		.icon {
			width: 40rpx;
			margin-right: 10rpx;
		}

		.get {
			width: 40rpx;
			margin-left: auto;
		}
	}

	.pay {
		background-color: #3484FF;
		color: #fff;
		font-size: 28rpx;
		text-align: center;
		margin-top: 40rpx;
		padding: 20rpx 0;
		border-radius: 100rpx;
	}
</style>